@tailwind base;
@tailwind components;
@tailwind utilities;

/* 动画 */
@keyframes pulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.4); /* 初始绿色半透明阴影 */
  }
  70% {
    box-shadow: 0 0 0 6px rgba(72, 187, 120, 0); /* 扩散后消失 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); /* 完全消失 */
  }
}

/* select ------------------------------------------------------------------- */
.select-layout{
  @apply h-[44px] border p-2 rounded-md hover:bg-[#f0f0f0] transition-all duration-100 flex justify-between items-center gap-2 text-[#333] text-[16px];
}
.select-layout--focus{
  @apply !border-green-500 ring-1 shadow-md;
}
.select-text{
  @apply flex-1 line-clamp-1;
}

/* 下拉箭头 */
.select-indicator{
  @apply w-4 h-4 shrink-0 relative;
}
.select-indicator-container{
  @apply absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2;
}
.select-indicator-arrow{
  @apply w-4 h-4 transition-all duration-300;
}
.select-indicator-loading{
  @apply w-4 h-4 animate-spin;
}
.select-indicator-close{
  @apply w-4 h-4 transition-all duration-300 bg-[#ccc] rounded-full cursor-pointer p-0.5;
}

/* 禁用效果 */
.select-layout--disabled{
  @apply !border-gray-300 !bg-[#f0f0f0] pointer-events-none;
}
.select-layout--disabled .select-text{
  @apply opacity-30;
}
/* 占位符效果 */
.select-layout--placeholder{
}
.select-layout--placeholder .select-text{
  @apply opacity-30;
}
/* 激活效果 */
.select-layout--active{
  @apply border-green-500 text-green-500 hover:bg-green-500/10;
}


/* plat-select ------------------------------------------------------------------ */
.plat-select-layout{
  @apply flex flex-wrap gap-2;
}
.plat-select-option{
  @apply px-4 py-1 rounded-full cursor-pointer hover:bg-black/10 flex items-center gap-2;
}
.plat-select-option--active{
  @apply bg-green-500 text-white hover:bg-green-500 shadow-md;
}

/* input ------------------------------------------------------------------ */
.input-layout{
  @apply h-[44px] border p-2 border-gray-300 rounded-md !text-[16px] flex items-center gap-2;
}
.input-layout--focus{
  @apply border-green-500 ring-1 shadow-md;
}
.input-layout--disabled{
  @apply !border-gray-300 !bg-[#f0f0f0] pointer-events-none;
}
.input-layout--disabled .input-text{
  @apply opacity-30;
}
.input-layout--placeholder{
}
.input-layout--placeholder .input-text{
  @apply opacity-30;
}

.input-text{
  @apply border-none outline-none shadow-none focus:!ring-0 p-0 h-full !text-[16px] flex-1;
}
/* 移除控制器样式 */
.input-text::-webkit-outer-spin-button, input::-webkit-inner-spin-button{
  @apply appearance-none;
}

.input-text-max{
  @apply opacity-30 shrink-0;
}
.input-indicator{
  @apply w-4 h-4 shrink-0 relative;
}
.input-indicator-container{
  @apply absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2;
}
.input-indicator-close{
  @apply w-4 h-4 transition-all duration-300 bg-[#ccc] rounded-full cursor-pointer p-0.5;
}


/* ranger ------------------------------------------------------------------ */
.ranger-layout{
  @apply h-[44px] border p-2 border-gray-300 rounded-md !text-[16px] flex items-center gap-2;
}

.ranger-layout--placeholder{
}
.ranger-layout--placeholder .ranger-text{
  @apply opacity-30;
}
.ranger-layout--disabled{
  @apply !border-gray-300 !bg-[#f0f0f0] pointer-events-none;
}
.ranger-layout--disabled .ranger-text{
  @apply opacity-30;
}
.ranger-layout--focus{
  @apply !border-green-500 ring-1 shadow-md;
}

.ranger-text{
  @apply flex-1 line-clamp-1;
}
.ranger-indicator{
  @apply w-4 h-4 shrink-0 relative;
}
.ranger-indicator-container{
  @apply absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2;
}
.ranger-indicator-arrow{
  @apply w-4 h-4 transition-all duration-300;
}
.ranger-indicator-close{
  @apply w-4 h-4 transition-all duration-300 bg-[#ccc] rounded-full cursor-pointer p-0.5;
}

.ranger-layout--focus{
  @apply border-green-500 ring-1 shadow-md;
}


/* btn ------------------------------------------------------------------ */
.btn-layout{
  @apply h-[44px] bg-green-500 border-green-500 text-[16px] font-medium text-white rounded-full px-[22px] flex items-center justify-center gap-2 cursor-pointer transition-all duration-300;
}
.btn-layout:hover{
  @apply opacity-80;
}
.btn-layout:active{
  @apply opacity-60;
}
.btn-layout:disabled{
  @apply pointer-events-none bg-opacity-60;
}
.btn-layout--outlined{
  @apply border border-green-500 bg-transparent text-green-500;
}


/* tags ------------------------------------------------------------------ */
.tags-layout{
  @apply flex flex-wrap gap-2;
}
.tags-option{
  @apply px-4 py-1 rounded-full flex items-center gap-2 bg-green-500 text-white hover:bg-green-500 shadow-md;
}
.tags-option-close{
  @apply w-4 h-4 transition-all duration-300 rounded-full cursor-pointer p-0.5 hover:cursor-pointer;
}